import {
    Breadcrumb,
    Card,
    Row,
    Col,
    Input,
    Button,
    Table,
    Space,
    Form,
    Modal,
    Select,
} from 'antd';
import { useState } from 'react';

export default () => {
    const [list, setList] = useState([
        {
            id: 1,
            nickname: '梅连成',
            theory: 98,
            skill: 99,
        },
        {
            id: 2,
            nickname: '陈飞翔',
            theory: 88,
            skill: 89,
        },
    ]);

    const [isAddVisible, setIsAddVisible] = useState(false);

    const columns = [
        {
            title: '学生姓名',
            dataIndex: 'nickname',
        },
        {
            title: '理论成绩',
            dataIndex: 'theory',
        },
        {
            title: '技能成绩',
            dataIndex: 'skill',
        },
        {
            title: '操作',
            render: () => {
                return (
                    <>
                        <Button type="link">编辑</Button>
                        <Button type="link" danger>
                            删除
                        </Button>
                    </>
                );
            },
        },
    ];

    const onSearch = () => {};

    const handleAddSubmit = () => {
        console.log('提交添加成绩');
    };

    return (
        <div className="score-manage" style={{ padding: '15px' }}>
            <Breadcrumb>
                <Breadcrumb.Item>首页</Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">成绩管理</a>
                </Breadcrumb.Item>
            </Breadcrumb>

            <Card>
                <Row gutter={10}>
                    <Col span={6}>
                        <Input.Search
                            placeholder="请输入学生名称"
                            onSearch={onSearch}
                        />
                    </Col>

                    <Col>
                        <Button
                            type="primary"
                            onClick={() => setIsAddVisible(true)}
                        >
                            添加成绩
                        </Button>
                    </Col>
                </Row>

                <Table
                    style={{ marginTop: '10px' }}
                    dataSource={list}
                    columns={columns}
                    rowKey={(record) => record.id}
                />
            </Card>

            {/* 添加成绩弹框 */}
            <Modal
                title="添加成绩"
                visible={isAddVisible}
                onOk={handleAddSubmit}
                onCancel={() => setIsAddVisible(false)}
                cancelText="取消"
                okText="确定"
            >
                <Space direction="vertical" size="large" className="block">
                    <Input placeholder="请输入理论成绩" />

                    <Input placeholder="请输入技能成绩" />

                    <Select placeholder="请选择学生" className="block">
                        <Select.Option value="2dwdqdwqdwq">
                            梅连成
                        </Select.Option>
                        <Select.Option value="2dwdqdwqdwq">
                            陈飞翔
                        </Select.Option>
                        <Select.Option value="2dwdqdwqdwq">
                            张晨旭
                        </Select.Option>
                    </Select>
                </Space>
            </Modal>
        </div>
    );
};
